<template>
  <div class="top-bar">
    <div class="ig"><img src="@/assets/R-C.png"></div>
    <dv-border-box-11 backgroundColor="skyblue" class="top">英雄联盟LPL比赛数据可视化</dv-border-box-11>
    <div id="time"></div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  mounted() {
    setInterval(function (){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let element = document.getElementById('time');
      element.innerHTML = year + '年' + month + '月' + day + '日' + '\t'  + hour + '时' + minute + '分' + second + '秒';
    },1000)
  }
}
</script>

<style scoped>
.top-bar{
  width: 100%;
  height: 12vh;
  /*background-color: #42b983;*/
}
.top{
  line-height: 8vh;
  font-size: 1.5vw;
  color: darksalmon;
}
.ig{
  position: absolute;
  margin: 4vh 0 0 12vw;
}
img{
  height: 7vh;
  width: 5vw;
}
#time{
  float: right;
  margin: -6vh 4vw 0 0 ;
  font-size: 1.3vw;
}
</style>
